.task_add {
  box-shadow: 0 0 1px 1px #dddadaad;
  transition: all .4s cubic-bezier(.215, .610, .355, 1);
  background: white;
  margin-bottom: 8px;
  border-radius: 5px;
  margin: 3px 20px 10px 10px;

  &_before {
    height: 50px;
    width: 100%;
    display: flex;

    &_icon_container {
      width: 30px;
      line-height: 50px;
      padding-left: 10px;

      .task_add_before_icon {
        font-size: 20px; 
   
        color: #3372fe;
        cursor: pointer;
      
        :hover {
          font-size: 22px;
          color: #2565ee;
        }
      }   
    }
  

    &_name {
      color: #ada7a7;
      line-height: 50px;
      padding-left: 10px;
    }
  }

  &_after {
    width: 100%;
    padding: 10px;

    .disabled {
      pointer-events: none;
    }

    .btn_container {
      display: flex;
      padding: 8px 0;

      .time_btn_container {
        display: flex;
        flex: 4;
        cursor: pointer;

        .time_btn {
          margin-top: 4px;
          padding: 8px;
          font-size: 12px; 
          background-color: #f5f1f1;
          border-radius: 5px;
          

          &:hover {
            background-color: #cfcbcb ; 
          }

          .icon {
            font-size: 15px;
            margin-right: 3px;
           
          }
        }

        .time_btn:nth-child(n+2) {
          margin-left: 5px;
        }
       
      }

      .function_btn_container {
        flex: 1;
        text-align: right;
        line-height: 38px;

        .create_btn {
          margin-left: 10px;
        }
      }
      
    }
  }

 
}
